<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-on</title>
</head>
<body>
    <h1 >v-on</h1>
    <hr>
    <div id="app"> 
         本次得分: <div>{{score}}</div>
         <br>
         <button v-on:click="addScore">加分</button>
         //简写
         <button @click="minusScore">减分</button><br>
         <input type="text" v-on:keyup.enter="onEnter" v-model="dobou">
    </div>
  


   <script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            score:0,
            dobou:1
        },
        methods:{
            addScore:function(){
                this.score++;
            },
            minusScore:function(){
                if(this.score<=0){
                    return;
                }
                this.score--;
            },
            onEnter:function(){
                this.score = this.score+parseInt(this.dobou);
            }
        }
    });
   
   </script>    
</body>
</html>